<template>
    <div v-if="isLogin">
        <!-- 登录页面展示这个容器，非登陆页面展示Layout组件，Layout组件中有路由容器 -->
        <router-view></router-view>
    </div>
    <!-- <NotFound v-else-if="isNotFound">
        <router-view></router-view>
    </NotFound> -->
    <!-- 注册组件 -->
    <Register v-else-if="register"></Register>
    <!-- 这里我们展示其他路由容器 -->
    <Layout v-else/>
</template>

<!-- 这是我们的js代码 -->
<script>
    //这里我们导入组件
    import Layout from './common/Layout.vue'
    // import NotFound from './common/NotFound.vue'
    import Register from './register'
    export default {
        components: {
        //我们这里将Layout注册为页面级组件
        Layout,
        // NotFound
        Register
    },
        //这里我们监听计算得到一个结果
        computed: {
            //这个isLogin会得到一个路由结果
            isLogin() {
                return this.$route.path === '/login'
            },
            // isNotFound(){
            //     return this.$route.path === 'log' 
            // },
            register(){
                return this.$route.path === '/register'
            },
            //这个menuList会得到一个菜单列表数据
            menuList() {
                return this.$store.getters['common/menuList']
            },
            
        },
      
        watch: {
            // 获取vuex中的menuList数据 -> this.$store.getters['common/menuList']
            // Failed watching path: "$store.getters['common/menuList']" Watcher only accepts simple dot-delimited paths. 
            // For full control, use a function instead.
            // "$store.getters['common/menuList']"(_list) {
            // menuList(_list) {

            // 这里的watch是懒监听 -- 在应用启动的时候，不会去监听数据
            
            menuList: {
                
                // 表示应用启动的时候就会监听数据变化
                immediate: true,
                // 添加一个处理器(监听业务处理方法)
                //这里我们入参了菜单列表数据
                handler(_list) {
                    console.log('---------------------------- 动态注册home路由',_list)
                    //我们将这个菜单列表数据进行过滤  有path的才返回  然后返回这个路由组件
                    let _routes = _list.filter(it => !!it.path).map(it => {
                        const Component = () => import(`.${it.path}`)
                        return {path: it.path, component: Component}
                    })
                    this.$router.addRoutes(_routes)

                
                    // let path = "/home"
                    // const Home = () => import('./home')
                    // const Home = () => import('.' + path)
                    // this.$router.addRoutes([
                    //     // {path: '/home', component: Home}
                    //     {path, component: Home}
                    // ])
                }
            }
        }
    }
</script>